require('./Maintainhighchart.styl');
const ReactHighcharts = require('react-highcharts')

var config = null;
class Maintainhighchart extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            
        };
    }

    render() {
        config = {
            chart: {
                type: 'bar'
            },
            title: {
                text: ''
            },
            legend: {
                enabled: this.state.data && this.state.data.show,
                align: 'center',
                verticalAlign: 'top',
                squareSymbol: false,
                symbolHeight: 12,
                symbolWidth: 21,
                symbolRadius: 0
            },
            xAxis: {
                categories: this.state.data && this.state.data.categories,
                title: {
                    text: null
                },
                tickLength: 0
            },
            yAxis: this.state.data && this.state.yAxis,
            tooltip: {
                enabled: false
            },
            plotOptions: {
                series: {
                    pointWidth: 10
                },
                column: {
                    stacking: 'percent',
                },
                bar: {
                    dataLabels: this.state.data && this.state.dataLabels
                }
            },
            credits: {
                enabled: false
            },
            series: this.state.data && this.state.data.series
        }
        return (
            <div className="maintainhighchart">
                <ReactHighcharts config={config}/>
            </div>
        );
    }

    componentWillMount() {}

    componentDidMount() {}

    componentWillReceiveProps(nextProps) {
        this.setState({
            yAxis: nextProps.data.percentage ? {
                title: {
                    text: ''
                },
                labels: {
                    overflow: 'justify',
                    formatter: function(){
                        return this.value + '%';
                    }
                },
                max: 100
            } : {
                title: {
                    text: ''
                },
                labels: {
                    overflow: 'justify',
                },
            },
            dataLabels: nextProps.data.percentage ? {
                    enabled: true,
                    formatter: function () {
                        var a = this.y; //a为当前柱状图y轴值除以总数然后乘以100
                        return a + "%"; //返回百分比和个数
                    }
                } : {
                    enabled: true,
                },
            data: nextProps.data
        })
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {}

    componentDidUpdate(prevProps, prevState) {}

    componentWillUnmount() {}
}

module.exports = Maintainhighchart;
